{% extends "learning/base.html" %}

{% block title %}笔记详情 · {{ entry.title }}{% endblock %}

{% block extra_head %}
<style>
    .note-gallery {
        display:grid;
        gap:1rem;
        grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    }
    .note-gallery figure {
        margin:0;
        border:1px solid var(--border-subtle);
        border-radius:var(--radius-md);
        overflow:hidden;
        background:var(--surface-elevated);
        box-shadow:var(--shadow-sm);
        display:flex;
        flex-direction:column;
        gap:0.5rem;
    }
    .note-gallery img {
        width:100%;
        height:180px;
        object-fit:cover;
    }
    .note-gallery figcaption {
        padding:0 0.75rem 0.75rem;
        font-size:0.85rem;
        color:var(--text-secondary);
    }
</style>
{% endblock %}

{% block content %}
<article class="card">
    <div style="margin-bottom:1.5rem;">
        <div style="display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;margin-bottom:0.75rem;">
            <span class="hero-badge">
                <span>状态</span>
                <span class="feed-status {{ entry.status }}">{{ entry.get_status_display }}</span>
            </span>
            {% if is_public %}
                <span class="pill success">🌍 已发布到公共笔记</span>
            {% elif entry.status == entry.Status.SUBMITTED %}
                <span class="pill warning">⏳ 等待老师审核</span>
            {% endif %}
        </div>
        <h1 style="margin:0 0 0.75rem 0;font-size:2rem;font-weight:800;letter-spacing:-0.02em;">
            {{ entry.title }}
        </h1>
        <div class="meta-grid" style="margin-top:1rem;">
            <div class="meta-item">
                <span class="meta-label">作者</span>
                <span class="meta-value">{{ entry.student.username }}</span>
            </div>
            <div class="meta-item">
                <span class="meta-label">最后更新</span>
                <span class="meta-value">{{ entry.updated_at|date:"Y-m-d H:i" }}</span>
            </div>
            <div class="meta-item">
                <span class="meta-label">提交时间</span>
                <span class="meta-value">
                    {% if entry.submitted_at %}
                        {{ entry.submitted_at|date:"Y-m-d H:i" }}
                    {% else %}
                        <em style="color:var(--text-tertiary);font-weight:400;">未提交</em>
                    {% endif %}
                </span>
            </div>
            <div class="meta-item">
                <span class="meta-label">发布状态</span>
                <span class="meta-value">
                    {% if entry.published_at %}
                        {{ entry.published_at|date:"Y-m-d H:i" }}
                    {% else %}
                        <em style="color:var(--text-tertiary);font-weight:400;">尚未公开</em>
                    {% endif %}
                </span>
            </div>
        </div>
    </div>

    <div class="action-group" style="margin-bottom:2rem;flex-wrap:wrap;gap:0.75rem;">
        {% if can_edit %}
            <a class="button secondary" href="{% url 'learning:notebook_edit' entry.pk %}">✏️ 编辑笔记</a>
        {% endif %}
        {% if can_submit %}
            <form method="post" action="{% url 'learning:notebook_submit' entry.pk %}" class="inline-form">
                {% csrf_token %}
                <button type="submit" class="button success">📤 提交老师审核</button>
            </form>
        {% endif %}
        {% if can_withdraw %}
            <form method="post" action="{% url 'learning:notebook_withdraw' entry.pk %}" class="inline-form">
                {% csrf_token %}
                <button type="submit" class="button secondary">↩️ 撤回提交</button>
            </form>
        {% endif %}
        {% if can_publish %}
            <form method="post" action="{% url 'learning:notebook_publish' entry.pk %}" class="inline-form">
                {% csrf_token %}
                <button type="submit" class="button success">✅ 通过并公开</button>
            </form>
            <form method="post" action="{% url 'learning:notebook_reject' entry.pk %}" class="inline-form">
                {% csrf_token %}
                <button type="submit" class="button danger">⛔ 驳回修改</button>
            </form>
        {% endif %}
    </div>

    <section style="line-height:1.8;font-size:1rem;color:var(--text-primary);">
        {{ entry.content|safe }}
    </section>

    {% if attachments %}
    <section style="margin-top:2.5rem;">
        <h3 class="section-heading">🖼️ 图片集</h3>
        <div class="note-gallery">
            {% for attachment in attachments %}
            <figure>
                <img src="{{ attachment.image.url }}" alt="笔记图片 {{ forloop.counter }}">
                <figcaption style="padding:0.5rem 0.75rem;color:var(--text-secondary);font-size:0.875rem;">
                    上传于 {{ attachment.uploaded_at|date:"Y-m-d H:i" }}
                </figcaption>
            </figure>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    {% if related_mistakes %}
    <section style="margin-top:2.5rem;">
        <h3 class="section-heading">🔗 关联错题</h3>
        <div style="display:grid;gap:0.75rem;">
            {% for mistake in related_mistakes %}
            <a class="feed-item" href="{{ mistake.get_absolute_url }}" style="text-decoration:none;">
                <div class="feed-header">
                    <h4 class="feed-title" style="margin:0;">{{ mistake.title }}</h4>
                    <span class="feed-status {{ mistake.status }}">{{ mistake.get_status_display }}</span>
                </div>
                <p style="margin:0.5rem 0 0;color:var(--text-secondary);font-size:0.9rem;">
                    最近更新：{{ mistake.updated_at|date:"Y-m-d H:i" }}
                </p>
            </a>
            {% endfor %}
        </div>
    </section>
    {% endif %}
</article>
{% endblock %}
